<template>
    <div>
        <div class="book-type-one">
            <div class="book-type-one-title">
                <span class="i-font-color"></span>
                <div><span>热销书籍</span></div>
                <div><a href="">更多</a></div>
            </div>
            <Loading v-show="isLoading"/>
            <div class="book-type-one-list">

                <div class="book-type-one-detail" v-for="item in showbookListOne" :key="item.id">
                    <router-link :to="{name:'BookInfo',params:{book_id:item.id}}">
                        <img :src="item.cover" :alt="item.name">
                        <div>{{item.name}}</div>
                        <span>{{item.author.pen_name}}</span>
                    </router-link>
                </div>

            </div>
        </div>
    </div>

</template>

<script>
    import {getBookList} from "../service/getData";
    import Loading from '../components/loadding';
    export default {
        components:{
            Loading
        },
        data() {
           return {
               bookListOne:[],
               isLoading: true
            }
        },
         computed:{
            showbookListOne(){
                return this.bookListOne.slice(0,9)
            }
        },
       async created() {
            this.isLoading = true;
          let response = await getBookList(1);
          // console.log(response.data);
           this.bookListOne = response.data;
           this.isLoading = false;
        }
    }

</script>

<style scoped>
    .book-type-one{
        margin-top: 0.5rem;
        background-color: white;
    }
    .book-type-one-title{
        padding: 0.8rem 0;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
    }
    .book-type-one-title > div > span,.book-type-two-title > div > span{
        font-size: 1.2rem;
        font-weight: bold;
        margin-left: 2rem;
    }
    .book-type-one-title > div > a,.book-type-two-title > div > a{
        margin-right: 2rem;
    }
    .book-type-one-list{
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
    }
    .book-type-one-detail{
        width:30vw;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        background-color: rgba(249, 249, 249, 0.62);
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .book-type-one-detail > a{
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
    }
    .book-type-one-detail > a > img{
        width:100%;
        justify-content: space-between;
    }
    .book-type-one-detail > a > div{
        margin-left: 0.2rem;
        margin-bottom: auto;
        margin-top: 0.2rem;
    }
    .book-type-one-detail > a > span{
        color: #4E5465;
        font-size: 0.8rem;
        margin-left: auto;
        margin-right: 0.5rem;
    }
</style>